import { Component, OnInit, OnDestroy } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { Product } from '../../api/product';
import { ProductService } from '../../service/product.service';
import { Subscription, debounceTime } from 'rxjs';
import { LayoutService } from 'src/app/layout/service/app.layout.service';

import {Good} from "../../api/product";


@Component({
    templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnInit, OnDestroy {

    items!: MenuItem[];

    products!: Product[];

    chartData: any;

    chartOptions: any;

    subscription!: Subscription;

    goods: Good[] = [];

    dataT: number[] = [0, 0, 0, 0, 0, 0, 0];

    dataH: number[] = [0, 0, 0, 0, 0, 0, 0];

    searchValue: string = "001";

    constructor(private productService: ProductService, public layoutService: LayoutService) {
        this.subscription = this.layoutService.configUpdate$
        .pipe(debounceTime(25))
        .subscribe((config) => {
            this.initChart();
        });
    }

    searchById(id: string): void {
        console.log(id);
        this.dataT = [0, 0, 0, 0, 0, 0, 0];
        this.dataH = [0, 0, 0, 0, 0, 0, 0];
        this.productService.getGoodsById(id).subscribe(res => {
            this.goods = res;
            this.initChart();
        });

    }

    ngOnInit() {
        //this.productService.getProductsSmall().then(data => this.products = data);
        this.productService.getGoods().subscribe(res => {
            this.goods = res;
            this.initChart();
        });


        this.items = [
            { label: 'Add New', icon: 'pi pi-fw pi-plus' },
            { label: 'Remove', icon: 'pi pi-fw pi-minus' }
        ];
    }

    initChart() {
        const documentStyle = getComputedStyle(document.documentElement);
        const textColor = documentStyle.getPropertyValue('--text-color');
        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');

        for (let i = 0; i < (this.goods.length < 7 ? this.goods.length : 7); i++) {
            this.dataH[i] = (Number(this.goods[i].envH));
        };
        for (let i = 0; i < (this.goods.length < 7 ? this.goods.length : 7); i++) {
            this.dataT[i] = (Number(this.goods[i].envT));
        };
        this.chartData = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: '温度',
                    data:  this.dataT,
                    fill: false,
                    backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
                    borderColor: documentStyle.getPropertyValue('--bluegray-700'),
                    tension: .4
                },
                {
                    label: '湿度',
                    data: this.dataH,
                    fill: false,
                    backgroundColor: documentStyle.getPropertyValue('--green-600'),
                    borderColor: documentStyle.getPropertyValue('--green-600'),
                    tension: .4
                }
            ]
        };

        this.chartOptions = {
            plugins: {
                legend: {
                    labels: {
                        color: textColor
                    }
                }
            },
            scales: {
                x: {
                    ticks: {
                        color: textColorSecondary
                    },
                    grid: {
                        color: surfaceBorder,
                        drawBorder: false
                    }
                },
                y: {
                    ticks: {
                        color: textColorSecondary
                    },
                    grid: {
                        color: surfaceBorder,
                        drawBorder: false
                    }
                }
            }
        };
    }

    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}
